{include file="public/header" /}
<body class="bgc">
<div class="header">
    <i class="layui-icon layui-icon-left"></i> 支付抢红包
</div>

<div class="pay-news flex-center">
    <p>实付金额</p>
    <div>￥<span>{$info.price}</span></div>
</div>

<ul class="pay-list">
    {volist name="pay_list" id="vo" key="k"}
    <li class="pay_way" data-type="{$vo.pay_way}">
        <label for="check2">
            <p class="flex-center">
                <img src="{$vo.icon}" alt="">
            </p>
            <p class="center">{$vo.title}</p>
            {if ($k == 1)}
            <img src="/static/index/img/icon7.png" alt="" class="check">
            {else}
            <img src="/static/index/img/icon6.png" alt="" class="check">
            {/if}
        </label>
    </li>
    {/volist}
</ul>

<p class="save save-fixed">确认支付</p>

<div class="model" id="is_password">
    <div class="pay-mdl">
        <p class="flex-center cancel">
            <img src="/static/index/img/icon54.png" alt="">
        </p>
        <div class="pay-mdl-news">
            <div>请输入支付密码</div>
            <p class="price">￥<span>{$info.price}</span></p>
            <p>支付金额</p>
            <input type="password" id="pay_password" placeholder="请输入支付密码">
            <p class="btn payment">确认支付</p>
        </div>
    </div>
</div>
<div class="model" id="not_password">
    <div class="pay-mdl">
        <p class="flex-center cancel_pay">
            <img src="/static/index/img/icon54.png" alt="">
        </p>
        <div class="pay-mdl-news">
            <p class="price">￥<span>{$info.price}</span></p>
            <p>支付金额</p>
            <p class="btn payment">确认支付</p>
        </div>
    </div>
</div>
<div id="pay"></div>
</body>
{include file="public/footer"/}
<script>
    $('.pay-list li').click(function() {
        $(this).addClass('pay_way').siblings().removeClass('pay_way');
        $(this).find('.check').attr('src', '/static/index/img/icon7.png')
        $(this).siblings().find('.check').attr('src', '/static/index/img/icon6.png')
    })

    $(".payment").click(function () {
        var pay_way = $(".pay_way").attr('data-type'), pay_password = $("#pay_password").val();
        if (!pay_way) {
            layer.msg('请选择支付方式');
            return false;
        }
        if(pay_way !='wechat' && pay_way != 'alipay'){
            if (!pay_password) {
                layer.msg('请填写支付密码');
                return false;
            }
        }
        return common.request("{:url('packet/confirmPayment')}", {
            id: '{$info.id}',
            pay_way: pay_way,
            pay_password: pay_password
        })
    });

    $('.save-fixed').click(function() {
        var pay_way = $(".pay_way").attr('data-type');
        if (!pay_way) {
            layer.msg('请选择支付方式');
            return false;
        }
        if(pay_way !='wechat' &&  pay_way != 'alipay'){
            $('#is_password').show()
        }else{
            $('#not_password').show()
        }
    })
    $('.cancel').click(function() {
        $('#is_password').hide()
    })
    $('.cancel_pay').click(function() {
        $('#not_password').hide()
    })
</script>
</html>